<template>
<div class="container">
    <img class="downBgi" :src="downBgi" alt="">
    <img class="downBtn" :src="downBtn" alt="" @click="e_goDownLoad">
    <div class='downInfo' v-if="infoBox" @click="e_closeInfo">
        <img class="infoBgi" :src="infoBgi" alt="">
        </div>
    </div>
</template>

<script>
import downBgi from '@imgs/downbgi.png'
import downBtn from '@imgs/downbtn.png'
import infoBgi from '@imgs/info.png'
export default {
    name: 'Login',
    data() {
        return {
            downBgi,
            downBtn,
            infoBgi,
            infoBox: false
        }
    },
    methods: {
        e_goDownLoad() {
            if (this.isWeiXin()) {
                this.infoBox = true
            } else {
                // window.open('https://miaotong.oss-cn-beijing.aliyuncs.com/miao_tong.apk')
                var u = navigator.userAgent,
                    app = navigator.appVersion;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                 if(isIOS){
                    alert('苹果手机暂不支持')
                    return false
                }
                window.open('https://hbtdeal.oss-cn-hongkong.aliyuncs.com/app/HBT.apk')
            }

        },
        e_closeInfo() {
            this.infoBox = false
        },
        // 判断是否在微信内部
        isWeiXin() {
            var ua = window.navigator.userAgent.toLowerCase();
            console.log(ua); //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                return true;
            } else {
                return false;
            }
        },
        // 判断安卓还是ios
        checkPhoneType() {
            var u = navigator.userAgent,
                app = navigator.appVersion;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        }
    },
    created() {

    }
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    .downBgi {
        width: 100%;
        height: 100%;
    }

    @media screen and(max-width: 375px) {
        .downBtn {
            width: 15rem;
            height: 3rem;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 45px;
            margin: auto;
        }
    }

    .downBtn {
        width: 15rem;
        height: 3rem;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 45px;
        margin: auto;
    }

    // @media screen and(min-width: 375px){

    // }

    // @media screen and(min-width: 414px) {
    //     .downBtn {
    //         width: 9rem;
    //         height: 3rem;
    //         position: absolute;
    //         left: 0;
    //         right: 0;
    //         bottom: 167px;
    //         margin: auto;
    //     }
    // }

    .downInfo {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 1;
        background-color: rgba(245, 242, 242, 0.9);

        .infoBgi {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
